import React, { useState } from 'react'
import PropTypes from 'prop-types'
import { Button, Space, Modal } from 'antd'
import { ExclamationCircleOutlined } from '@ant-design/icons'
import style from './OperateBtns.module.less'
import OperateConfirmModal from './OperateConfirmModal'
import CanCelModal from './CanCelModal'
const { confirm } = Modal
// 二次确认弹框
function showConfirm (action, callback) {
  confirm({
    icon: <ExclamationCircleOutlined />,
    content: (
      <div>
        <div>{action.alertmsg}</div>
        {action.employees ? <div>下一步操作者：{action.employees}</div> : null}
      </div>

    ),
    onOk: callback
  })
}

// 渲染单个按钮
function renderBtn (action, disable, formRef, docList, setModalVisible, setCurrentAction, callback) {
  let type = 'primary'
  if (['disagree', 'normal', 'cancel'].indexOf(action.opt_add) !== -1) {
    type = ''
  }
  const defaultHandle = () => {
    fillDocToVars(formRef, docList)
    callback(action)
  }
  let handle = () => defaultHandle()
  const hasLevel = Object.prototype.hasOwnProperty.call(action, 'level')
  const hasUnSelectDoc = docList.length > 0 && docList.some(li => !li.value || li.value === 'select')
  if (hasLevel || hasUnSelectDoc || action.opt_add === 'cancel') {
    handle = () => {
      setModalVisible(true)
      setCurrentAction(action)
    }
  } else if (action.alertmsg) {
    handle = () => {
      showConfirm(action, defaultHandle)
    }
  }
  return <Button key={action.id} type={type} disabled={disable} onClick={handle}>{action.name}</Button>
}

// 获取文书列表
function getDocList (list) {
  return list.filter(li => li.type === '文书')
}

// 完成处理方法
function finishHandle (d = {}, formRef, action, docList, setVisible, callBack) {
  if (d.defaultDocList && d.defaultDocList instanceof Array && d.defaultDocList.length) {
    d.docList = [...d.defaultDocList, ...d.docList]
    delete d.defaultDocList
  }
  const hasLevel = Object.prototype.hasOwnProperty.call(d, 'level')
  const hasDoc = Object.prototype.hasOwnProperty.call(d, 'docList')
  if (hasLevel) {
    action.level = d.level
  }
  if (hasDoc) {
    fillSelectedDocToVars(formRef, d)
  } else if (docList.length > 0) {
    fillDocToVars(formRef, docList)
  }
  if (d.remark) {
    formRef.current.setFieldsValue({ remark: d.remark })
  }
  setVisible(false)
  callBack(action)
}

// 填充选中的文书到vars中
function fillSelectedDocToVars (formRef, d) {
  const c = formRef.current
  const params = c.getFieldsValue()
  const vars = params.vars
  const varsKeys = Object.keys(vars)
  varsKeys.forEach(v => {
    if (d.docList.indexOf(v) !== -1) {
      vars[v] = v
    }
  })
  c.setFieldsValue({ vars })
}

// 填充默认文书值到表单
function fillDocToVars (formRef, list) {
  const m = {}
  const c = formRef.current
  list.forEach(li => {
    if (li.value) {
      m[li.key] = li.value
    }
  })
  if (c) {
    const { vars } = c.getFieldsValue(['vars'])
    formRef.current.setFieldsValue({ vars: { ...vars, ...m } })
  }
}

// 渲染呈批取消按钮
function renderCancelApproveBtn (instance, showFn) {
  const h = instance.history || []
  if (h.length === 0) {
    return (
      <Button onClick={showFn}>删除呈批</Button>
    )
  }
}

// 渲染操作按钮
function OperateBtns ({ instance, callBack, disable, formRef, refreshApprove }) {
  const [visible, setVisible] = useState(false)
  const [action, setAction] = useState(null)
  const [cancelVisible, setCancelVisible] = useState(false)
  const docList = getDocList(instance.currentStep.vars)
  if (!instance) {
    return null
  }
  return (
    <span className={style.container}>
      <OperateConfirmModal visible={visible} onHide={() => { setVisible(false); setAction(null) }} docList={docList} action={action} onFinish={d => finishHandle(d, formRef, action, docList, setVisible, callBack)} />
      <CanCelModal visible={cancelVisible} instance={instance} hide={() => setCancelVisible(false)} refreshApprove={refreshApprove} />
      <Space>
        {renderCancelApproveBtn(instance, () => setCancelVisible(true))}
        {(instance.currentStep.actions || []).map(li => renderBtn(li, disable, formRef, docList, setVisible, setAction, callBack))}
      </Space>
    </span>
  )
}

OperateBtns.proptypes = {
  instance: PropTypes.object,
  callBack: PropTypes.func,
  disable: PropTypes.bool,
  formRef: PropTypes.object,
  refreshApprove: PropTypes.func
}

OperateBtns.defaultProps = {
  instance: null,
  callBack: () => {},
  disable: false,
  formRef: null,
  refreshApprove: () => {}
}

export default OperateBtns
